<template>
  <view class="productItem">
    <view class="productItem-left">
      <image
        class="productItem-left-icon"
        src="@/pagesA/static/images/product/product_list_icon.png"
      ></image>
      <view v-if="!hideLine" class="productItem-left-line"></view>
    </view>
    <view class="productItem-right" @tap="seeMore">
      <view class="productItem-right-row">
        <view class="productItem-right-row-content fontBold16 color333 text1">
          {{ data.title }}
        </view>

        <image class="productItem-right-row-more" :src="moreIcon"></image>
      </view>
      <view v-if="!hideLine" class="productItem-right-line"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from "@dcloudio/uni-app";
import { onMounted } from "vue";
import { ref } from "vue";
import { kkButtonLayout } from "@/components/common/enmu";

import moreIcon from "@/pagesA/static/images/product/product_arrow.png";

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
  hideLine: {
    type: Boolean,
    default: false,
  },
});

onLoad((options) => {});

const seeMore = () => {
  uni.navigateTo({
    url: `/pagesA/productNews/detail?data=${encodeURIComponent(
      JSON.stringify(props.data)
    )}`,
  });
  console.log("seeMore");
};
</script>

<style lang="scss" scoped>
.productItem {
  padding-left: 24rpx;
  padding-right: 24rpx;
  padding-top: 0px;
  padding-bottom: 0rpx;
  display: flex;
  flex-direction: row;
  &-left {
    width: 52rpx;
    display: flex;
    flex-direction: column;
    &-icon {
      // margin-top: 8rpx;
      width: 36rpx;
      height: 36rpx;
    }
    &-line {
      margin-left: 10rpx;
      margin-top: 10rpx;
      height: calc(100% - 32rpx);
      border-left: 1rpx dashed #cccccc;
      transform: scaleX(0.5);
    }
  }
  &-right {
    display: flex;
    flex-direction: column;
    width: calc(100% - 52rpx);
    &-row {
      margin-bottom: 24rpx;
      display: flex;
      flex-direction: row;
      &-content {
        width: calc(100% - 136rpx);
        margin-right: 24prx;
      }
      &-more {
        margin-top: auto;
        margin-bottom: auto;
        margin-left: auto;
        height: 50rpx;
        width: 50rpx;
      }
    }
    &-line {
      border-bottom: 1rpx dashed #cccccc;
      transform: scaleY(0.5);
      margin-top: 14rpx;
      margin-bottom: 33rpx;
    }
  }
}
</style>
